<template>
  <div>
    <a-card class="info-card" :bordered="false">
      <detail-list title="护士信息">
        <detail-list-item term="姓名">{{ nurse.name }}</detail-list-item>
      </detail-list>
    </a-card>
    <a-card class="card" title="修改护士排班" :bordered="false">
      <a-form :form="form" class="form" @submit="handleSubmit">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="星期一">
              <a-select
                placeholder="请选择班类"
                v-decorator="[ 'monday', {rules: [{ required: true, message: '请选择班类'}]} ]">
                <a-select-option :key="1">早班</a-select-option>
                <a-select-option :key="2">中班</a-select-option>
                <a-select-option :key="3">晚班</a-select-option>
                <a-select-option :key="4">假期</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="星期二">
              <a-select
                placeholder="请选择班类"
                v-decorator="[ 'tuesday', {rules: [{ required: true, message: '请选择班类'}]} ]">
                <a-select-option :key="1">早班</a-select-option>
                <a-select-option :key="2">中班</a-select-option>
                <a-select-option :key="3">晚班</a-select-option>
                <a-select-option :key="4">假期</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="星期三">
              <a-select
                placeholder="请选择班类"
                v-decorator="[ 'wednesday', {rules: [{ required: true, message: '请选择班类'}]} ]">
                <a-select-option :key="1">早班</a-select-option>
                <a-select-option :key="2">中班</a-select-option>
                <a-select-option :key="3">晚班</a-select-option>
                <a-select-option :key="4">假期</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="星期四">
              <a-select
                placeholder="请选择班类"
                v-decorator="[ 'thursday', {rules: [{ required: true, message: '请选择班类'}]} ]">
                <a-select-option :key="1">早班</a-select-option>
                <a-select-option :key="2">中班</a-select-option>
                <a-select-option :key="3">晚班</a-select-option>
                <a-select-option :key="4">假期</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xl="{span: 6, offset: 1}">
            <a-form-item label="星期五">
              <a-select
                placeholder="请选择班类"
                v-decorator="[ 'friday', {rules: [{ required: true, message: '请选择班类'}]} ]">
                <a-select-option :key="1">早班</a-select-option>
                <a-select-option :key="2">中班</a-select-option>
                <a-select-option :key="3">晚班</a-select-option>
                <a-select-option :key="4">假期</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="{span: 6, offset: 1}" :lg="6" :md="12" :sm="24">
            <a-form-item label="星期六">
              <a-select
                placeholder="请选择班类"
                v-decorator="[ 'saturday', {rules: [{ required: true, message: '请选择班类'}]} ]">
                <a-select-option :key="1">早班</a-select-option>
                <a-select-option :key="2">中班</a-select-option>
                <a-select-option :key="3">晚班</a-select-option>
                <a-select-option :key="4">假期</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="星期日">
              <a-select
                placeholder="请选择班类"
                v-decorator="[ 'sunday', {rules: [{ required: true, message: '请选择班类'}]} ]">
                <a-select-option :key="1">早班</a-select-option>
                <a-select-option :key="2">中班</a-select-option>
                <a-select-option :key="3">晚班</a-select-option>
                <a-select-option :key="4">假期</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary" @click="handleSubmit(e)" :loading="loading">提交</a-button>
          <a-button style="margin-left: 8px" @click="goback">返回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { getNurse, updateScheduling } from '../../api/nurse'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: 'EditScheduling',
  data () {
    return {
      id: '',
      loading: false,
      data: {},
      nurse: {},
      form: this.$form.createForm(this)
    }
  },
  components: {
    DetailList,
    DetailListItem
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          const sch = this.form.getFieldsValue(['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'])
          const re = { nurseId: this.id, ...sch }
          console.log('sch', sch)
          console.log('re', re)
          updateScheduling(re).then(res => {
            this.$router.push('/nurse/index')
            this.$notification.success({
              message: '成功',
              description: `修改成功`
            })
          }).catch(err => {
            console.log('err', err)
            this.$notification.error({
              message: '失败',
              description: `修改失败`
            })
            this.loading = false
          })
        }
      })
    },
    initValue () {
      this.form.setFieldsValue({
        'monday': this.data.monday,
        'tuesday': this.data.tuesday,
        'wednesday': this.data.wednesday,
        'thursday': this.data.thursday,
        'friday': this.data.friday,
        'saturday': this.data.saturday,
        'sunday': this.data.sunday
      })
    },
    goback () {
      this.$router.push('/nurse/index')
    }
  },
  mounted () {
    this.id = this.$route.query.id // 获取路径参数 id
    if (this.id === undefined || this.id === null) {
      this.$router.push('/nurse/index')
    }
    console.log('id:', this.id)
    getNurse(this.id).then(res => { // 调用 getNurseById api 获取该 id 下的用户数据
      console.log('res', res)
      this.nurse = res.result
      this.data = res.result.scheduling
      console.log('nurse', this.nurse)
      console.log('data', this.data)
      this.initValue()
    }).catch(err => {
      console.log('err', err)
    })
  }
}
</script>
<style>
.info-card{
margin-bottom: 20px;
}
</style>
